<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录</view>
			<view class="title" style="margin-bottom:80rpx;">智能仓库管理系统</view>


			<view class="item-input">
				<tm-input :focus-show="true" bg-color="grey-lighten-5" :border-bottom="false"  v-model="name"
						  title-class="text-size-n text-weight-b text-primary" :padding="[10,0]"
						  prefixp-icon="icon-user-group-fill" :vertical="true" placeholder="请输入用户名"></tm-input>
			</view>
			<view class="item-input">

			<tm-input :focus-show="true" :clear="true" bg-color="grey-lighten-5" :border-bottom="false" v-model="password"
					  title-class="text-size-n text-weight-b text-primary" :padding="[10,0]"
					  prefixp-icon="icon-lock" :password="true" :vertical="true" placeholder="请输入密码"></tm-input>

			</view>

			<view class="alternative">
				<view class="issue" @click="click">忘记密码？</view>
			</view>
			<button @tap="submit" class="getCaptcha">登录</button>
			<view class="register-item">
				<view class="issue">没有账号？<text class="register-word" @click="click">去注册</text></view>
			</view>
		</view>

		<tm-message ref="toast"></tm-message>


	</view>

<!--	<view class="u-page">-->
<!--		<view class="u-page__button-item">-->
<!--			<u-button-->
<!--				text="登录页"-->
<!--				size="normal"-->
<!--				type="info"-->
<!--				@click="click"-->
<!--			></u-button>-->
<!--		</view>-->
<!--		<tm-button  @click="$refs.toast.show({model:'load'})" size='m'>load</tm-button>-->



<!--	</view>-->
</template>

<script>

	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	export default {
		components: {
			tmButton,tmInput
		},
		data() {
			return {
				name:'1',
				password:'2',
			}
		},

		methods: {
			submit(){
				if(this.name.trim() == '' || this.password.trim() == ''){
					this.$refs.toast.show({model:'info',mask:true,label:"用户名和密码不能为空"});
                }else{
					this.$refs.toast.hide();
					this.$refs.toast.show({model:'wait',mask:true,label:"登录中..."});
					uni.setStorageSync('AccessToken','22222222');
					this.$Router.push({
						path:"/pages/work/index",
						query: { id: 1 }
					});
				}
			},
			click() {
				this.$refs.toast.show({model:'info',mask:true,label:"暂未开放"});
			}
		},
		onLoad() {

		},
	}
</script>

<style lang="scss" scoped>
.wrap {
	font-size:28rpx;
	overflow: hidden;

	.content {
		width: 600rpx;
		margin:250rpx auto 0;

		.title {
			text-align: left;
			font-size:50rpx;
			font-weight:800;
			margin-bottom:10rpx;
		}
		.item-input{
			margin-bottom:40rpx;
		}

		.getCaptcha {
			background-color: rgb(26, 56, 250);
			color: $u-bg-color;
			border: none;
			font-weight: 700;
			font-size: 30rpx;
			padding:6rpx 0;
			letter-spacing: 2px;
			border-radius: 60rpx;

			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			//display: flex;
			display: block;
			text-align: right;
			justify-content:center;
			margin:30rpx 0;
			.issue{
				display: inline-block;
			}

		}
		.register-item {

			display: flex;
			justify-content:center;
			margin:50rpx 0;
			color: $u-tips-color;
				.register-word{
					color:rgb(26, 56, 250);
				}


		}


	}

}
</style>
